<template>
    <div>
      <div>
        <video-comm :videoPath="video.video_path"></video-comm>
      </div>
      <div class="details_content_content">
        <div class="details_content_title">
          {{video.title}}
        </div>
        <div class="details_content_time">{{video.createtime}}</div>
        <div class="details_content_text">
          {{video.description}}
        </div>
        <div class="details_content_btn">
          <div>
            <span class="iconfont icon-dianzan"></span>
            <span>{{video.praise_num}}</span>
          </div>
          <div>
            <span class="iconfont icon-fenxiang"></span>
            <span>分享</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import VideoComm from '../common/VideoComm';
  export default {
    props:{
      video:{
        type:Object,
        default: function () {
          return {}
        }
      }
    },
    name: 'ContentCommon',
    watch:{
      video(newValue){
        return newValue
      }
    },
    components: {VideoComm},
  }
</script>

<style scoped>
  .details_content_content{
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
  }
  .details_content_content .details_content_title{
    font-size: 0.9rem;
  }
  .details_content_content .details_content_time{
    font-size: 0.8rem;
    color: #999999;
    margin: 10px 0;
    height: 20px;
    line-height: 20px;
  }
  .details_content_content .details_content_text{
    font-size: 0.8rem;
    color: #999999;
  }
  .details_content_content .details_content_btn{
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin: 10px 0 0;
  }
  .details_content_content .details_content_btn .iconfont{
    font-size: 1.2rem;
    color: #999999;
    position: relative;
    top: 2px;
  }
</style>
